<script setup>
import { ref } from 'vue'
import { CircleClose, Star, ArrowUp, Share } from '@element-plus/icons-vue'
import SvgIcon from '@/components/iconfont/SvgIcon.vue'
import '../../../assets/iconfont/iconfont.js'
const guanzhu = ref(false) //true表示已经关注
const gz = () => {
  guanzhu.value = true
  console.log(guanzhu.value)
}
const noGz = () => {
  guanzhu.value = false
  console.log(guanzhu.value)
}
const plInput = ref()
defineProps({
  postId: {
    type: Number,
    required: true
  }
})
const post = ref({
  id: 1,
  title: '这是一个帖子标题1',
  content:
    '这是帖子的详细内容1尊敬的hhhh哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈党组作为一名预备党员，我很荣幸在过去的一年里接受党组织的考察和培养。在这里，我将就预备期的表现以及转正申请作简要汇报。首先，关于我的入党动机。自入学以来，，还要有实际行动的体现。我要不断提高自身的综合素质',
  authorName: '作者名字1',
  likes: 1150
})
console.log(post.value)
</script>

<template>
  <div class="post-detail">
    <div v-if="post" class="container">
      <div class="cover-image">
        <img src="../../../assets/sun.jpg" alt="Cover Image" />
      </div>
      <div class="container_1">
        <div class="top">
          <div class="author">
            <img
              src="../../../assets/show1.png"
              alt="Author Avatar"
              class="avatar"
            />
            <span class="author-name">{{ post.authorName }}</span>
          </div>
          <el-button type="danger" round @click="gz" v-if="guanzhu == false"
            >关注</el-button
          >
          <el-button round @click="noGz" v-if="guanzhu == true"
            >已关注</el-button
          >
        </div>
        <div class="title">
          <div class="titleWord">{{ post.title }}</div>
        </div>
        <div class="content">
          <div>{{ post.content }}</div>
        </div>
        <div class="footer">
          <el-input
            v-model="plInput"
            style="width: 180px"
            placeholder="说点什么.."
            autosize
            type="textarea"
            clearable
          />
          <div class="threeBox">
            <el-button round>发送</el-button>
            <el-button :icon="ArrowUp" circle />
            <el-button :icon="Star" circle />
            <el-button :icon="Share" circle />
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="closeIcon">
      <el-icon @click="$emit('close')"><CircleClose /></el-icon>
    </div> -->
  </div>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
}
.post-detail {
  display: flex;
  position: fixed;
  top: 5%;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 700px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: all 0.5s ease;
}
.closeIcon {
  display: flex;
  justify-content: end;
}
.cover-image {
  display: flex;
  justify-content: center;
  align-items: center;
}
.cover-image img {
  width: 300px;
  height: 100%;
}
.container_1 {
  // width: 300px;
  display: flex;
  flex-direction: column;
}
.title {
  .titleWord {
    padding: 16px;
    height: 50px;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }
}

.content {
  padding: 16px;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  // border-top: 1px solid #ddd;
}

.author {
  display: flex;
  align-items: center;
}

.author .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 8px;
}
.footer {
  display: flex;
  margin-top: auto; /* 推到底部 */
  padding: 12px;
  .threeBox {
    // width: 100px;
    display: flex;
    margin-left: 5px;
  }
}

.likes {
  font-size: 16px;
  color: #666;
}
</style>
